<div class="ms-frame" ng-controller="ServiceCtrl">
  <!-- header -->
  <div class="frame-h">
    <div class="frame-h-act">
      <a ui-sref="manageService" class="frame-h-act-btn ms-back-btn"></a>
    </div>
    <h3 class="frame-h-ctx">Manage Websites</h3>
    <div class="frame-h-act-rt">
      <a ui-sref="home" class="frame-h-act-btn ms-home-btn"></a>
    </div>
  </div><!-- /header -->
  <!-- content 1 -->
  <div class="content-1">
    <h3 class="content-1-h">Create a Service</h3>
    <p class="content-1-p">
      The service name along with your public ID will form the URL used to view
      your site in a browser. <br> e.g. blog.maidsafe.safenet
    </p>
  </div><!-- /content 1 -->
  <!-- create service form -->
  <div class="ms-form">
    <form id="create_service" name="create_service" ng-submit="createService()" ng-init="$state.params.serviceName ? serviceName = $state.params.serviceName : ''">
      <div class="form-grp lgt">
        <input type="text" name="service" required="required" placeholder="Service Name" ng-model="serviceName" focus="true">
      </div>
    </form>
  </div><!-- create public ID form -->
  <!-- content 1 -->
  <div class="container-3">
    <p class="heading-sm">
      This is how your service will look in the browser.
    </p>
  </div><!-- /content 1 -->
  <div class="service-preview">
    <span class="service-preview-ctx">safe://<b>{{ (serviceName ? serviceName : '&lt;service name&gt;')}}</b>.{{longName}}</span>
  </div>
  <div class="container-2 text-center">
    <button type="submit" class="ms-btn ms-primary-btn" form="create_service" ng-disabled="!serviceName" name="submitService">Next</button>
  </div>
</div>
